<template>
  <h5>shallowReactive和shallowRef</h5>
  <h5>m1:{{ m1 }}</h5>
  <h5>m2:{{ m2 }}</h5>
  <h5>m3:{{ m3 }}</h5>
  <h5>m4:{{ m4 }}</h5>
  <button @click="update">更新数据</button>
</template>
<script>
  import { defineComponent, reactive, ref, shallowReactive, shallowRef} from 'vue';
  export default defineComponent({
    name:'ShallowReactive',
    setup(){
      // 深度劫持(深监视)--->深度响应式
      const m1 = reactive({
        name:'m1的name',
        age:20,
        Car:{
          name:'奔驰',
          color:'red'
        }
      })
      // 浅劫持(浅监视)--->浅响应式
      const m2 = shallowReactive({
        name:'m1的name',
        age:20,
        Car:{
          name:'奔驰',
          color:'red'
        }
      })
      // 深度劫持(深监视)--->深度响应式--->做了reactive的处理
      const m3 = ref({
        name:'m1的name',
        age:20,
        Car:{
          name:'奔驰',
          color:'red'
        }
      })
      // 浅劫持(浅监视)--->浅响应式
      const m4 = shallowRef({
        name:'m1的name',
        age:20,
        Car:{
          name:'奔驰',
          color:'red'
        }
      })
      const update = ()=>{
        // 更新m1的数据--->reactive的方式
        // m1.name+='==='
        // m1.Car.name+='==='
        // 更新m2的数据--->shallowReactive的方式
        // m2.name+='==='
        // m2.Car.name+='==='
        // 更新m3的数据--->ref的方式
        // m3.value.name+="==="
        // m3.value.Car.name+="==="
        // 更新m4的数据--->shallowRef的方式
        // m4.value.name="==="
        // m4.value.Car.name+="==="
        // console.log(m3,m4);
      }
      return{
        m1,
        m2,
        m3,
        m4,
        update
      }
    }
  })
</script>
<style scoped>
</style>